import React from 'react';
import Api from 'Utils/api';
import { Modal, Form, Input, Select, message } from 'antd';
import ChartOfModal from './Components/ChartOfModal';
import './index.scss';

const Option = Select.Option;
const AddEditForm = Form.create()(
  (props) => {
    const { form, onChange } = props;
    const { getFieldDecorator } = form;

    return (
      <Form >
        <FormItem
          label="主体类别:"
        >
          {
            getFieldDecorator('type', {
              initialValue: '食品流通',
            })(
              <Select className="select" onChange={onChange.bind(this, 0)}>
                <Option value="食品流通">食品流通</Option>
                <Option value="餐饮服务">餐饮服务</Option>
                <Option value="食品生产">食品生产</Option>
                <Option value="药品经营">药品经营</Option>
                <Option value="保健食品">保健食品</Option>
                <Option value="化妆品">化妆品</Option>
                <Option value="医疗器械">医疗器械</Option>
              </Select>
            )
          }
        </FormItem >
        <FormItem
          label="时间范围:"
        >
          {
            getFieldDecorator('time', {
              initialValue: '1m',
            })(
              <Select className="select" >
                <Option value="1m">一个月</Option>
                <Option value="3m">三个月</Option>
                <Option value="1y">一年</Option>
              </Select>
            )
          }
        </FormItem >
        <FormItem
          label="行政处罚占评分比例:"
        >
          {
            getFieldDecorator('percent1', {
              initialValue: 16,
            })(
              <Input placeholder="请输入" className="input" onChange={onChange.bind(this, 1)} />
            )
          }
        </FormItem >
        <FormItem
          label="阳光厨房评分比例:"
        >
          {
            getFieldDecorator('percent2', {
              initialValue: 16,
            })(
              <Input placeholder="请输入" className="input" onChange={onChange.bind(this, 2)} />
            )
          }
        </FormItem >
        <FormItem
          label="抽检监测占评分比例:"
        >
          {
            getFieldDecorator('percent3', {
              initialValue: 16,
            })(
              <Input placeholder="请输入" className="input" onChange={onChange.bind(this, 3)} />
            )
          }
        </FormItem >
        <FormItem
          label="永安通巡查占评分比例:"
        >
          {
            getFieldDecorator('percent4', {
              initialValue: 16,
            })(
              <Input placeholder="请输入" className="input" onChange={onChange.bind(this, 4)} />
            )
          }
        </FormItem >
        <FormItem
          label="移动执法巡查占评分比例:"
        >
          {
            getFieldDecorator('percent5', {
              initialValue: 16,
            })(
              <Input placeholder="请输入" className="input" onChange={onChange.bind(this, 5)} />
            )
          }
        </FormItem >
        <FormItem
          label="公众投诉举报占评分比例:"
        >
          {
            getFieldDecorator('percent6', {
              initialValue: 20,
            })(
              <Input placeholder="请输入" className="input" onChange={onChange.bind(this, 6)} />
            )
          }
        </FormItem >
      </Form >
    );
  }
);
const FormItem = Form.Item;
class AddModal extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      data: [
        {
          item: '抽检监测',
          value: 16,
          obj: '食品生产'
        },
        {
          item: '行政处罚',
          value: 16,
          obj: '食品生产'
        },
        {
          item: '永安通巡查',
          value: 16,
          obj: '食品生产'
        },
        {
          item: '移动执法巡查',
          value: 16,
          obj: '食品生产'
        },
        {
          item: '阳光厨房',
          value: 16,
          obj: '食品生产'
        },
        {
          item: '公众投诉举报',
          value: 20,
          obj: '食品生产',
        }
      ],
    };
    this.handleChange = ::this.handleChange;
  }
  show() {
    this.setState({ visible: true });
  }
  close() {
    this.setState({
      visible: false,
    });
  }
  onOk() {
    const self = this;
    const formValue = this.form.getFieldsValue();
    const count = parseInt(formValue.percent1, 10) + parseInt(formValue.percent2, 10) + parseInt(formValue.percent3, 10)
      + parseInt(formValue.percent4, 10) + parseInt(formValue.percent5, 10) + parseInt(formValue.percent6, 10);
    if (count !== 100) {
      message.error('总值必须为100');
      return;
    }
    const api = new Api({
      method: 'POST',
      path: '/warning/enterprise',
      data: {
        category: formValue.type,
        time: formValue.time,
        justice_case: parseInt(formValue.percent1, 10),
        sunny_kitchen: parseInt(formValue.percent2, 10),
        product_check: parseInt(formValue.percent3, 10),
        enter_check: parseInt(formValue.percent5, 10),
        report: parseInt(formValue.percent6, 10),
        gps_data: parseInt(formValue.percent4, 10),
      },
      success: () => {
        message.success('添加成功');
        self.props.init();
        self.close();
      },
      error: (err) => {
        message.error(err);
        self.close();
      }
    });
    api.run();
  }
  onCancel() {
    this.close();
  }
  handleChange(val, e) {
    const formValue = this.form.getFieldsValue();
    const { data } = this.state;
    //判断类别
    if (val === 0) {
      for (let i = 0, len = data.length; i < len; i++) {
        data[i].obj = e;
      }
      this.setState({
        data: [...data]
      });
      return;
    }
    const objValue = Object.values(formValue);
    objValue.shift();
    objValue.shift();
    objValue[val - 1] = parseInt(e.target.value, 10);
    for (let i = 0, len = data.length; i < len; i++) {
      let value = 0;
      if (objValue[i]) {
        value = parseInt(objValue[i], 10) ? parseInt(objValue[i], 10) : 0;
      } else {
        value = 0;
      }
      data[i].value = value;
    }
    this.setState({
      data: [...data]
    });
  }
  render() {
    return (
      <Modal
        title="新增预警条件"
        wrapClassName="vertical-center-modal"
        visible={this.state.visible}
        className="add-alert-rule-modal"
        onOk={this.onOk.bind(this)}
        onCancel={this.onCancel.bind(this)}
        width={1210}
      >
        <div className="form">
          <AddEditForm
            ref={(ref) => { this.form = ref; }}
            onChange={this.handleChange}
          />
        </div>
        <div className="chart">
          <ChartOfModal data={this.state.data} />
        </div>
      </Modal >
    );
  }
}

export default AddModal;

